<template>
	<view class="record-packbox relative">
		<view v-for="(item, index) in list" :key="index" class="record-item font-hanserif-bold relative">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/record-item-bg.png`" class="bg" />
				
			<view class="relative bottom-btns flex flex-justify-content-between">
				<view class="bottom-btns-left flex-direction-column truncate flex-justify-content-center flex-base">
					<view class="bottom-right-top truncate" style="text-align: left;width: 100%;">
						{{ item.box_name }}
					</view>
					
					<view class="bottom-left-bottom">{{ item.create_time }}</view>
				</view>
				
				<view class="bottom-btns-right flex-direction-column flex-justify-content-center flex-full">
					<view class="detail-HC-type relative flex-end flex-align-items-end">
						<image
							class="HC-type-tip"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'hot'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'cool'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '全局'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/all-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'first'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/first-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'last'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/last-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '夺宝'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/treasure-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '叠叠'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/stacking-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '冲冲'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/flush-icon.png`"
							mode="heightFix"
						></image>
						<image
							class="HC-type-tip"
							v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '普通'"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ordinary-icon.png`"
							mode="heightFix"
						></image>
						<image class="HC-type-nums" 
							v-else 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
							mode="heightFix"></image>
						<image
							class="HC-type-give absolute"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_give === 1"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/gift.png`"
							mode=""
						></image>
					</view>
					
					<view class="flex-end flex-align-items-end">
						<view class="truncate bottom-left-top relative" style="z-index: 2;"><text style="font-size: 38rpx;"> {{ item.reward_item_name }}</text></view>
						<view class="truncate bottom-left-top-border absolute" style="z-index: 1;"><text style="font-size: 38rpx;"> {{ item.reward_item_name }}</text></view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {
		getRedPacketDetailApi
	} from '@/setupproject/INTERFACE.js';
	export default {
		name: 'comOpenBoxRecord',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			recordType: {
				type: Number,
				default: () => 1
			},
		},
		data() {
			return {
				confirmDialog: false,
				confirmInfo: {},
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {

		}
	};
</script>

<style lang="scss" scoped>
	.record-packbox {
		width: 100%;
		padding-bottom: 18rpx;

		.record-item {
			color: #fff;
			font-size: 30rpx;
			margin: auto auto 20rpx;
			padding: 0 28rpx;
			width: 710rpx;
			height: 144rpx;

			.title {
				margin-bottom: 8rpx;
			}

			.box-name {
				font-size: 30rpx;
				margin-bottom: 12rpx;
				color: #999999;
			}
			
			.disabled {
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
			}

			.bottom-btns {
				width: 100%;
				height: 100%;
				
				.info-bg {
					top: 10rpx;
					left: 300rpx;
					width: 164rpx;
					height: 120rpx;
				}

				.bottom-btns-left {
					width: 280rpx;
					color: #FE7000;
					font-size: 26rpx;
				}
				
				.detail-HC-type {
					width: 100%;
					text-align: center;
					
					.HC-type-give {
						width: 56rpx;
						height: 30rpx;
						right: 14rpx;
						top: 10rpx;
					}
					.HC-type-nums {
						width: 70rpx;
						height: 50rpx;
					}
					.HC-type-tip {
						width: 96rpx;
						height: 52rpx;
					}
					.HC-type-name {
						color: #FFF;
						font-size: 24rpx;
					}
				}
				
				.bottom-left-top {
					font-size: 28rpx;
					color: #FFFFFF;
					// text-stroke: 1rpx #C06D24;
					background: linear-gradient(to top, #FFF8AF 0%, #FFB300 100%);
					// -webkit-text-stroke: 1rpx #C06D24;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.bottom-left-top-border {
					font-size: 28rpx;
					color: transparent;
					text-stroke: 2rpx #C06D24;
					-webkit-text-stroke: 2rpx #C06D24;
				}
				
				.bottom-left-bottom {
					font-size: 24rpx;
					color: #FFCEA6;
					margin-top: 10rpx;
				}

				.bottom-btns-right {
					width: 390rpx;
					
					.btn-view {
						width: 105rpx;
						height: 32rpx;
					}
				}
				
				.bottom-right-top {
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.bottom-right-bottom {
					margin-top: 10rpx;
				}
				
			}
		}
	}

</style>